<!-- 财务概况 -->
<template>
    <div class="data-profile">
        <div class="ls-card">
            <div class="card-title">订单总金额概况</div>
            <div class="card-content m-t-24">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-tooltip content="订单总金额（不包含退款金额）" placement="top">
                            <div class="inline" @click="openWindows('order_order', 'all')">
                                <div class="lighter m-b-8">订单总金额（元）</div>
                                <div class="font-size-24">
                                    {{ infoData.order_price }}
                                </div>
                            </div>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="6">
                        <el-tooltip content="退款订单总金额" placement="top">
                            <div class="inline" @click="openWindows('after_sales', '')">
                                <div class="lighter m-b-8">退款订单总金额（元）</div>
                                <div class="font-size-24">
                                    {{ infoData.return_price }}
                                </div>
                            </div>
                        </el-tooltip>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="ls-card m-t-16">
            <div class="card-title">提现金额概况</div>
            <div class="card-content m-t-24">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-tooltip content="可提现总金额" placement="top">
                            <div class="inline">
                                <div class="lighter m-b-8">可提现总金额（元）</div>
                                <div class="font-size-24">
                                    {{ infoData.supplier_price }}
                                </div>
                            </div>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="6">
                        <el-tooltip content="已提现总金额" placement="top">
                            <div class="inline">
                                <div class="lighter m-b-8">已提现总金额（元）</div>
                                <div class="font-size-24">
                                    {{ infoData.withdraw_price }}
                                </div>
                            </div>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="6">
                        <el-tooltip content="待结算金额" placement="top">
                            <div class="inline" @click="openWindows('finance_balance', '1')">
                                <div class="lighter m-b-8">待结算金额（元）</div>
                                <div class="font-size-24">
                                    {{ infoData.lock_price }}
                                </div>
                            </div>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="6">
                        <el-tooltip content="已结算总金额" placement="top">
                            <div class="inline" @click="openWindows('finance_balance', '2')">
                                <div class="lighter m-b-8">已结算总金额（元）</div>
                                <div class="font-size-24">
                                    {{ infoData.sett_price || 0 }}
                                </div>
                            </div>
                        </el-tooltip>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="m-t-16"></div>
        <el-button type="primary" @click="dialogVisible = true">余额提现</el-button>
        <el-table :data="tabelData" class="m-t-16">
            <el-table-column prop="sn" label="提现单号" align="center"></el-table-column>
            <el-table-column prop="money" label="提现金额" align="center"></el-table-column>
            <el-table-column prop="status_desc" label="提现状态" align="center"></el-table-column>
            <el-table-column prop="create_time" label="申请时间" align="center"></el-table-column>
            <el-table-column prop="" label="操作" align="center">
                <template #default="{ row }">
                    <el-button type="text" @click="openWindow(row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="uiwu-pagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleSizeChange"
                :current-page="currentPage4"
                :page-size="10"
                background
                hide-on-single-page
                layout="total, prev, pager, next, jumper"
                :total="totals"
            >
            </el-pagination>
        </div>
        <el-dialog title="余额提现" :visible.sync="dialogVisible" width="500px" @close="money = null">
            <el-form label-width="120px">
                <el-form-item label="当前可提现余额">{{ configInfo.able_withdraw }}</el-form-item>
                <el-form-item label="提现金额">
                    <el-input placeholder="请输入" v-model="money"></el-input>
                </el-form-item>
                <el-form-item label="提现手续费">{{ configInfo.percentage }}</el-form-item>
                <el-form-item label="提现银行">{{ configInfo.bank_name }} {{ configInfo.bank_number }}</el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">返回</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { apiSupplierWithdraw, apiWithdrawLists, apiWithdrawGetConfig, apiTransferApply } from '@/api/finance/finance'
@Component
export default class FinanceProfile extends Vue {
    dialogVisible = false
    tabelData: any[] = []
    infoData: any = {}
    totals = 0
    configInfo: any = {}
    money: any = null
    currentPage4 = 1
    openWindow(row: any) {
        this.$router.push({
            name: 'finance_detail',
            query: {
                id: row.id
            }
        })
    }
    openWindows(name: string, type: string) {
        this.$router.push({
            name,
            query: {
                type
            }
        })
    }
    async confirm() {
        const data = await apiTransferApply({
            money: this.money
        })
        this.$message.success('申请成功')
        this.dialogVisible = false
        this.getApiWithdrawLists()
    }
    handleSizeChange(e: any) {
        this.currentPage4 = e
        this.getApiWithdrawLists()
    }
    getApiWithdrawLists() {
        apiWithdrawLists({
            page_no: this.currentPage4,
            page_size: 10
        }).then(({ lists, count }) => {
            this.tabelData = lists
            this.totals = count
        })
    }
    created() {
        apiSupplierWithdraw({}).then(res => {
            this.infoData = res
        })
        apiWithdrawGetConfig({}).then(res => {
            this.configInfo = res
        })
        this.getApiWithdrawLists()
    }
}
</script>

<style lang="scss" scoped>
.ls-card {
    .card-title {
        font-size: 14px;
        font-weight: 500;
    }
}
.uiwu-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 16px 0;
}
.inline {
    cursor: pointer;
}
</style>
